<html><head><title>TableLayout.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>TableLayout.js</h1><pre class="highlighted"><code><i>/**
 * @class Ext.layout.TableLayout
 * @extends Ext.layout.ContainerLayout
 * &lt;p&gt;This layout allows you to easily render content into an HTML table.  The total number of columns can be
 * specified, and rowspan and colspan can be used to create complex layouts within the table.
 * This class is intended to be extended or created via the layout:<em>'table'</em> {@link Ext.Container#layout} config,
 * and should generally not need to be created directly via the <b>new</b> keyword.&lt;/p&gt;
 * &lt;p&gt;Note that when creating a layout via config, the layout-specific config properties must be passed <b>in</b> via
 * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.  In the
 * <b>case</b> of TableLayout, the only valid layout config property is {@link #columns}.  However, the items added to a
 * TableLayout can supply the following table-specific config properties:&lt;/p&gt;
 * &lt;ul&gt;
 * &lt;li&gt;&lt;b&gt;rowspan&lt;/b&gt; Applied to the table cell containing the item.&lt;/li&gt;
 * &lt;li&gt;&lt;b&gt;colspan&lt;/b&gt; Applied to the table cell containing the item.&lt;/li&gt;
 * &lt;li&gt;&lt;b&gt;cellId&lt;/b&gt; An id applied to the table cell containing the item.&lt;/li&gt;
 * &lt;li&gt;&lt;b&gt;cellCls&lt;/b&gt; A CSS class name added to the table cell containing the item.&lt;/li&gt;
 * &lt;/ul&gt;
 * &lt;p&gt;The basic concept of building up a TableLayout is conceptually very similar to building up a standard
 * HTML table.  You simply add each panel (or &quot;cell&quot;) that you want to include along <b>with</b> any span attributes
 * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
 * Rather than explicitly creating and nesting rows and columns as you would <b>in</b> HTML, you simply specify the
 * total column count <b>in</b> the layoutConfig and start adding panels <b>in</b> their natural order from left to right,
 * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,
 * how to position each panel within the table.  Just like <b>with</b> HTML tables, your rowspans and colspans must add
 * up correctly <b>in</b> your overall layout or you'll end up <b>with</b> missing and/or extra cells!  Example usage:&lt;/p&gt;
 * &lt;pre&gt;&lt;code&gt;
<i>// This code will generate a layout table that is 3 columns by 2 rows</i>
<i>// <b>with</b> some spanning included.  The basic layout will be:</i>
<i>// +--------+-----------------+</i>
<i>// |   A    |   B             |</i>
<i>// |        |--------+--------|</i>
<i>// |        |   C    |   D    |</i>
<i>// +--------+--------+--------+</i>
<b>var</b> table = <b>new</b> Ext.Panel({
    title: <em>'Table Layout'</em>,
    layout:<em>'table'</em>,
    defaults: {
        <i>// applied to each contained panel</i>
        bodyStyle:<em>'padding:20px'</em>
    },
    layoutConfig: {
        <i>// The total column count must be specified here</i>
        columns: 3
    },
    items: [{
        html: <em>'&amp;lt;p&amp;gt;Cell A content&amp;lt;/p&amp;gt;'</em>,
        rowspan: 2
    },{
        html: <em>'&amp;lt;p&amp;gt;Cell B content&amp;lt;/p&amp;gt;'</em>,
        colspan: 2
    },{
        html: <em>'&amp;lt;p&amp;gt;Cell C content&amp;lt;/p&amp;gt;'</em>,
        cellCls: <em>'highlight'</em>
    },{
        html: <em>'&amp;lt;p&amp;gt;Cell D content&amp;lt;/p&amp;gt;'</em>
    }]
});
&lt;/code&gt;&lt;/pre&gt;
 */</i>
Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
    <i>/**
     * @cfg {Number} columns
     * The total number of columns to create <b>in</b> the table <b>for</b> this layout.  If not specified, all panels added to
      * <b>this</b> layout will be rendered into a single row using a column per panel.
     */</i>

    <i>// private</i>
    monitorResize:false,

    <i>// private</i>
    setContainer : <b>function</b>(ct){
        Ext.layout.TableLayout.superclass.setContainer.call(<b>this</b>, ct);

        <b>this</b>.currentRow = 0;
        <b>this</b>.currentColumn = 0;
        <b>this</b>.cells = [];
    },

    <i>// private</i>
    onLayout : <b>function</b>(ct, target){
        <b>var</b> cs = ct.items.items, len = cs.length, c, i;

        <b>if</b>(!<b>this</b>.table){
            target.addClass(<em>'x-table-layout-ct'</em>);

            <b>this</b>.table = target.createChild(
                {tag:<em>'table'</em>, cls:<em>'x-table-layout'</em>, cellspacing: 0, cn: {tag: <em>'tbody'</em>}}, null, true);
        }
        <b>this</b>.renderAll(ct, target);
    },

    <i>// private</i>
    getRow : <b>function</b>(index){
        <b>var</b> row = <b>this</b>.table.tBodies[0].childNodes[index];
        <b>if</b>(!row){
            row = document.createElement(<em>'tr'</em>);
            <b>this</b>.table.tBodies[0].appendChild(row);
        }
        <b>return</b> row;
    },

    <i>// private</i>
	getNextCell : <b>function</b>(c){
		<b>var</b> cell = <b>this</b>.getNextNonSpan(<b>this</b>.currentColumn, <b>this</b>.currentRow);
		<b>var</b> curCol = <b>this</b>.currentColumn = cell[0], curRow = <b>this</b>.currentRow = cell[1];
		<b>for</b>(var rowIndex = curRow; rowIndex &lt; curRow + (c.rowspan || 1); rowIndex++){
			<b>if</b>(!<b>this</b>.cells[rowIndex]){
				<b>this</b>.cells[rowIndex] = [];
			}
			<b>for</b>(var colIndex = curCol; colIndex &lt; curCol + (c.colspan || 1); colIndex++){
				<b>this</b>.cells[rowIndex][colIndex] = true;
			}
		}
		<b>var</b> td = document.createElement(<em>'td'</em>);
		<b>if</b>(c.cellId){
			td.id = c.cellId;
		}
		<b>var</b> cls = <em>'x-table-layout-cell'</em>;
		<b>if</b>(c.cellCls){
			cls += <em>' '</em> + c.cellCls;
		}
		td.className = cls;
		<b>if</b>(c.colspan){
			td.colSpan = c.colspan;
		}
		<b>if</b>(c.rowspan){
			td.rowSpan = c.rowspan;
		}
		<b>this</b>.getRow(curRow).appendChild(td);
		<b>return</b> td;
	},
    
    <i>// private</i>
	getNextNonSpan: <b>function</b>(colIndex, rowIndex){
		<b>var</b> cols = <b>this</b>.columns;
		<b>while</b>((cols &amp;&amp; colIndex &gt;= cols) || (<b>this</b>.cells[rowIndex] &amp;&amp; <b>this</b>.cells[rowIndex][colIndex])) {
			<b>if</b>(cols &amp;&amp; colIndex &gt;= cols){
				rowIndex++;
				colIndex = 0;
			}<b>else</b>{
				colIndex++;
			}
		}
		<b>return</b> [colIndex, rowIndex];
	},

    <i>// private</i>
    renderItem : <b>function</b>(c, position, target){
        <b>if</b>(c &amp;&amp; !c.rendered){
            c.render(<b>this</b>.getNextCell(c));
            <b>if</b>(this.extraCls){
                <b>var</b> t = c.getPositionEl ? c.getPositionEl() : c;
                t.addClass(<b>this</b>.extraCls);
            }
        }
    },

    <i>// private</i>
    isValidParent : <b>function</b>(c, target){
        <b>return</b> true;
    }

    <i>/**
     * @property activeItem
     * @hide
     */</i>
});

Ext.Container.LAYOUTS[<em>'table'</em>] = Ext.layout.TableLayout;</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
    </body></html>